<template>
	<view :data-theme="theme">
		<tui-skeleton v-if="skeletonShow"></tui-skeleton>
		<view
			style="position: relative; z-index: 99"
			:class="isGoodsReturn ? 'bg-gray' : 'bg_color'"
		>
			<useNavBar
				:bgColor="isGoodsReturn ? '#666' : '#00785E'"
				:title="$t(`page.orderDetails.navTitle`)"
				:autoBack="false"
				@clickLeft="returns"
			>
				<view
					slot="right"
					style="color: #fff"
					class="iconfont icon-more"
					@click="open"
				></view>
			</useNavBar>
		</view>
		<view class="order-details">
			<!-- 给header上与data上加on为退款订单-->
			<view class="header bg_color" :class="isGoodsReturn ? 'on' : ''">
				<view v-if="!PayerID" class="picTxt acea-row row-middle">
					<view
						class="pictrue"
						v-if="isGoodsReturn == false && orderStatus != 0"
					>
						<image :src="statusPic(orderInfo.status)"></image>
					</view>
					<view
						class="pictrue"
						v-if="isGoodsReturn == false && orderStatus == 0"
					>
						<image src="@/static/images/daifukuan.gif"></image>
					</view>
					<view class="data" :class="isGoodsReturn ? 'on' : ''">
						<block v-if="isGoodsReturn">
							<view class="state">{{
								$filters.refundStatusFilter(orderInfo.refundStatus)
							}}</view>
						</block>

						<block v-if="!isGoodsReturn">
							<view v-show="orderStatus == 0" class="state">
								<view v-if="orderInfo.offlinePayStatus === 'doing'">{{
									$t(`page.user.orderStatus[7].name`)
								}}</view>
								<view v-else-if="orderInfo.offlinePayStatus === 'pay_fail'">{{
									$t(`page.user.orderStatus[8].name`)
								}}</view>
								<view v-else>{{ $t(`page.user.orderStatus[0].name`) }}</view>
							</view>
							<view class="state">{{
								$filters.orderStatusFilter(orderInfo.status)
							}}</view>
						</block>
					</view>
				</view>
			</view>

			<view class="pad30">
				<!-- 退款状态头部信息 "-->
				<view class="nav refund" v-if="isGoodsReturn">
					<view class="title">
						<image src="/static/images/shuoming.png" mode=""></image>
						{{
							orderInfo.refundStatus == 0
								? $t(`page.users.userReturnList.examine`)
								: orderInfo.refundStatus == 1
								? $t(`page.users.userReturnList.refuse`)
								: orderInfo.refundStatus == 2
								? $t(`page.users.userReturnList.refunding`)
								: $t(`page.users.userReturnList.refunded`)
						}}
					</view>
					<view class="con pad30">
						{{
							orderInfo.refundStatus == 0
								? $t(`page.users.userReturnList.examineInfo`)
								: orderInfo.refundStatus == 1
								? $t(`page.users.userReturnList.refuseReason`) +
								  orderInfo.refundReason
								: $t(`page.users.userReturnList.refuseReason2`)
						}}
					</view>
				</view>
				<view v-if="!isGoodsReturn" class="nav address">
					<view class="name"
						>{{ orderInfo.realName
						}}<text class="phone">{{ orderInfo.userPhone }}</text></view
					>
					<view>{{ orderInfo.userAddress }}</view>
				</view>
				<view v-if="orderStatus == 0">
					<block v-for="(item, index) in orderInfo.orderList">
						<orderGoods
							:evaluate="evaluate"
							:orderInfo="item"
							:orderId="order_id"
							:ids="id"
							:uniId="uniId"
							:cartInfo="item.orderInfoList"
							:jump="true"
							:showSku="false"
						></orderGoods>
					</block>
				</view>
				<view v-else>
					<orderGoods
						:evaluate="evaluate"
						:orderInfo="orderInfo"
						:productType="orderInfo.type"
						:orderId="order_id"
						:ids="id"
						:uniId="uniId"
						:cartInfo="cartInfo"
						:jump="true"
						:showSku="false"
					></orderGoods>
				</view>
			</view>

			<view class="pad30">
				<view class="wrapper borRadius14">
					<view class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.orderId`) }}: </view>
						<view class="text-overflow order-item"
							>{{ isGoodsReturn ? orderInfo.merOrderNo : orderInfo.orderNo }}
							<image
								class="img"
								src="../../static/images/icon_copy.png"
								@click="
									copy(isGoodsReturn ? orderInfo.merOrderNo : orderInfo.orderNo)
								"
							/>
						</view>
						<!-- <text
							class="copy copy-data"
							@click="
								copy(isGoodsReturn ? orderInfo.merOrderNo : orderInfo.orderNo)
							"
							>{{ $t(`page.orderDetails.copy`) }}</text
						> -->
					</view>
					<view v-if="isGoodsReturn" class="item acea-row row-between">
						<view>{{ $t(`page.users.userReturnList.orderId`) }}: </view>
						<view class="text-overflow order-item"
							>{{ orderInfo.refundOrderNo }}
							<image
								class="img"
								src="../../static/images/icon_copy.png"
								@click="copy(orderInfo.refundOrderNo)"
							/>
						</view>
						<!-- <text
							class="copy copy-data"
							@click="copy(orderInfo.refundOrderNo)"
							>{{ $t(`page.orderDetails.copy`) }}</text
						> -->
					</view>
					<view class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.orderTime`) }}: </view>
						<view class="conter">{{ orderInfo.createTime }}</view>
					</view>
					<view v-if="orderInfo.refundTime" class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.refundTime`) }}: </view>
						<view class="conter">{{ orderInfo.refundTime }}</view>
					</view>
					<view v-if="!isGoodsReturn" class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.payStatus`) }}: </view>
						<view class="conter" v-if="orderInfo.paid">{{
							$t(`page.orderDetails.payTrue`)
						}}</view>
						<view class="conter" v-else>{{
							$t(`page.orderDetails.payFalse`)
						}}</view>
					</view>
					<view v-if="!isGoodsReturn" class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.payType`) }}: </view>
						<view class="conter">
							{{ $t(`${orderInfo.payType}`) }}
						</view>
					</view>
					<view class="message-wrap" v-if="orderInfo.userRemark">
						<view>{{ $t(`page.orderDetails.message`) }}: </view>
						<view class="conter">{{ orderInfo.userRemark }}</view>
					</view>
				</view>

				<!-- 线下支付 收款信息 -->
				<view
					class="wrapper borRadius14"
					v-if="orderStatus == 0 && orderInfo.payType === 'offline'"
				>
					<view class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.accountNmuber`) }}: </view>
						<text class="text-overflow refund_reason">
							{{ offlinePayConfig.offline_bank_card_no }}
							<image
								class="img"
								src="../../static/images/icon_copy.png"
								@click="copy(offlinePayConfig.offline_bank_card_no)"
							/>
						</text>

						<!-- <text
							class="copy copy-data"
							@click="copy(offlinePayConfig.offline_bank_card_no)"
							>{{ $t(`page.orderDetails.copy`) }}</text
						> -->
					</view>
					<view class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.bank`) }}: </view>
						<text class="text-overflow">{{
							offlinePayConfig.offline_bank_name
						}}</text>
					</view>
					<view class="item acea-row row-between">
						<view>{{ $t(`page.orderDetails.account`) }}: </view>
						<text class="text-overflow">{{
							offlinePayConfig.offline_bank_receive_name
						}}</text>
					</view>
					<view
						class="item acea-row row-between"
						v-show="orderInfo.offlinePayFailMessage"
					>
						<view>{{ $t(`page.orderDetails.note`) }}: </view>
						<text class="text-overflow">{{
							orderInfo.offlinePayFailMessage
						}}</text>
					</view>
					<view class="item">
						<view class="title acea-row row-between-wrapper">
							<view
								><text style="color: red">*</text
								>{{ $t(`page.users.goodsReturn.voucher`) }}</view
							>
							<view class="tip">{{
								"(" + $t(`message.tips.upPic`) + ")"
							}}</view>
						</view>
						<view class="upload acea-row row-middle">
							<use-upload
								style="margin-top: 10rpx"
								v-model="fileList"
								model="order"
								pid="9"
								:disabled="
									orderInfo.offlinePayStatus === 'doing' ||
									orderInfo.offlinePayStatus === 'has_pay'
								"
							/>
						</view>
					</view>
				</view>
				<!-- 退款原因 "-->
				<view v-if="isGoodsReturn" class="wrapper borRadius14">
					<view
						class="item acea-row row-between"
						v-if="orderInfo.refundReasonWap"
					>
						<view>{{ $t(`page.orderDetails.returnReason`) }}: </view>
						<view class="conter">{{ orderInfo.refundReasonWap }}</view>
					</view>
					<view
						class="item acea-row row-between"
						v-if="orderInfo.refundReasonWapExplain"
					>
						<view>{{ $t(`page.orderDetails.returnMsg`) }}: </view>
						<view class="conter">{{ orderInfo.refundReasonWapExplain }}</view>
					</view>
					<view
						class="item acea-row row-between"
						v-if="
							orderInfo.refundReasonWapImg &&
							orderInfo.refundReasonWapImg.length > 0
						"
					>
						<view>{{ $t(`page.orderDetails.returnImg`) }}: </view>
						<view class="acea-row refundReasonWapImg">
							<view
								class="pictrue mr10 mb4"
								v-for="(itemn, indexn) in refundReasonWapImg"
								:key="indexn"
							>
								<image
									:src="itemn"
									class="image"
									@click="getpreviewImage(indexn)"
								></image>
							</view>
						</view>
					</view>
				</view>
				<view class="wrapper borRadius14">
					<view v-if="!isGoodsReturn" class="item acea-row row-between borders">
						<view>{{ $t(`page.orderDetails.allPrice`) }}:</view>
						<view class="conter"
							><statistic
								:value="orderInfo.proTotalPrice"
								:currency="orderInfo.currency"
						/></view>
					</view>
					<view
						class="item acea-row row-between"
						v-if="orderInfo.payPostage > 0"
					>
						<view>{{ $t(`page.orderDetails.freight`) }}: </view>
						<view class="conter"
							><statistic
								:value="orderInfo.payPostage"
								:currency="orderInfo.currency"
						/></view>
					</view>
					<view class="item acea-row row-between" v-if="orderInfo.couponId">
						<view>{{ $t(`page.orderDetails.coupon`) }}: </view>
						<view class="conter"
							>-<statistic
								:value="orderInfo.couponPrice"
								:currency="orderInfo.currency"
						/></view>
					</view>
					<view
						class="item acea-row row-between"
						v-if="orderInfo.useIntegral > 0"
					>
						<view>{{ $t(`page.orderDetails.point`) }}: </view>
						<view class="conter"
							>-<statistic
								:value="orderInfo.deductionPrice"
								:currency="orderInfo.currency"
						/></view>
					</view>
					<view v-if="!isGoodsReturn" class="actualPay acea-row row-right">
						{{ $t(`page.orderDetails.actualPayment`) }}:
						<text class="money">
							<statistic
								:value="orderInfo.payPrice"
								:currency="orderInfo.currency"
							/>
						</text>
					</view>
					<view
						v-else
						class="actualPay acea-row row-right"
						style="padding-top: 0"
						>{{ $t(`page.users.userReturnList.total`) }}:
						<text class="money"
							><statistic
								:value="orderInfo.refundPrice"
								:currency="orderInfo.currency" /></text
					></view>
				</view>
				<view style="height: 10rpx"></view>
			</view>
			<view
				class="footer acea-row row-right row-middle"
				v-if="isGoodsReturn == false"
			>
				<view
					class="qs-btn"
					v-if="!orderInfo.paid && orderInfo.offlinePayStatus !== 'doing'"
					@click.stop="cancelOrder"
					>{{ $t(`page.orderDetails.cancelOrder`) }}</view
				>
				<view
					class="bnt bg_color"
					v-if="!orderInfo.paid && orderInfo.offlinePayStatus !== 'doing'"
					@tap="pay_open(order_id)"
					>{{ $t(`page.orderDetails.nowPay`) }}</view
				>
				<navigator
					hover-class="none"
					:url="'/pages/users/goods_return/index?orderId=' + order_id"
					class="bnt cancel"
					v-else-if="orderInfo.paid === true && orderInfo.refundStatus === 0"
					>{{ $t(`page.orderDetails.refund`) }}
				</navigator>
				<navigator
					class="bnt cancel"
					v-if="orderInfo.status > 0"
					hover-class="none"
					:url="'/pages/users/goods_logistics/index?orderId=' + order_id"
					>{{ $t(`page.orderDetails.logistics`) }}
				</navigator>
				<view
					class="bnt bg_color"
					v-if="orderInfo.status == 1"
					@tap="confirmOrder"
					>{{ $t(`page.orderDetails.confirm`) }}</view
				>
				<view class="bnt cancel" v-if="orderInfo.status == 3" @tap="delOrder">{{
					$t(`page.orderDetails.delete`)
				}}</view>
				<view
					class="bnt bg_color"
					v-if="orderInfo.status == 3"
					@tap="goOrderConfirm"
					>{{ $t(`page.orderDetails.again`) }}</view
				>
			</view>
		</view>
		<tui-drawer mode="right" :visible="rightDrawer" @close="closeDrawer">
			<user-drawer @close="closeDrawer"></user-drawer>
		</tui-drawer>
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hide"
			:title="modelTitle"
			:content="modelContent"
		></tui-modal>
	</view>
</template>
<script>
import statistic from "@/components/statistic";
import request, { uploadFile } from "@/utils/request.js";
import {
	getOrderDetail,
	orderTake,
	orderDel,
	orderCancel,
	// qrcodeApi,
	orderMasterDetail,
	orderReplyDetail,
} from "@/api/order.js";
import { postCartAdd } from "@/api/store.js";
// import payment from '@/components/payment';
import orderGoods from "@/components/orderGoods";
import tuiModal from "@/components/tui-modal/tui-modal";
import { toLogin } from "@/libs/login.js";
import { Debounce } from "@/utils/validate.js";
import { useAppStore } from "@/stores/app";
const appStore = useAppStore();
export default {
	components: {
		// payment,
		orderGoods,
		tuiModal,
		statistic,
	},
	data() {
		return {
			skeletonShow: true, //骨架屏显示隐藏
			order_id: "",
			evaluate: 0,
			cartInfo: [], //购物车产品
			orderInfo: {
				systemStore: {},
				pstatus: {},
			}, //订单详情
			system_store: {},
			isGoodsReturn: false, //是否为退款订单
			status: {}, //订单底部按钮状态
			isClose: false,
			payMode: [
				//预留以后多种支付方式
			],
			pay_close: false,
			pay_order_id: "",
			totalPrice: "0",
			id: 0, //订单id
			uniId: "",
			utils: this.$util,
			againStatus: 0,
			type: "normal",
			isShow: true,
			theme: "theme3",
			rightDrawer: false,
			modelTitle: "",
			modelContent: "",
			modal: false,
			modelType: "",
			orderStatus: null,
			refundReasonWapImg: [],
			PayerID: "",
			offlinePayConfig: {},
			offlinePayStatusName: {
				doing: "凭证审核中",
				pay_fail: "支付失败",
				need_pay: "待支付",
				has_pay: "已支付",
			},
			fileList: [],
			offlinePayFile: [],
		};
	},
	onLoad: function (options) {
		uni.setNavigationBarTitle({
			title: this.$t(`page.orderDetails.navTitle`),
		});
		options.type == undefined || options.type == null
			? (this.type = "normal")
			: (this.type = options.type);
		if (!options.order_id)
			return this.$util.Tips(
				{
					title: "缺少参数",
				},
				{
					tab: 3,
					url: 1,
				}
			);
		this.order_id = options.order_id;
		this.isReturen = Number(options.isReturen) || 0;
		this.orderStatus = options.orderStatus || 1;
		this.PayerID = options.PayerID || "";
		if (appStore.isLogin) {
			if (this.isReturen === 1) {
				this.isGoodsReturn = true;
				uni.setNavigationBarColor({
					frontColor: "#fff",
					backgroundColor: "#666666",
				});
				this.getOrderReplyInfo();
			} else {
				if (this.orderStatus == 0) {
					this.getOrderMasterInfo();
				} else {
					this.getOrderInfo();
				}
			}
		} else {
			toLogin();
		}
	},
	// 滚动监听
	onPageScroll(e) {
		// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
		uni.$emit("scroll");
	},
	onHide: function () {
		this.isClose = true;
	},
	methods: {
		// 线下支付 获取收款信息
		getOfflinePayConfig() {
			request.get("pay/offline_pay_config").then((res) => {
				this.offlinePayConfig = res.data;
			});
		},

		uploadPayFile() {
			this.offlinePayFile = [];
			if (this.fileList.length > 0) {
				this.fileList.forEach((item) => {
					let url = item.url;
					let index = url.indexOf(url.split("/")[2]) + url.split("/")[2].length;
					let fileUrl = url.substring(index + 1, url.length);
					this.offlinePayFile.push(fileUrl);
				});
			} else {
				uni.showToast({
					title: this.$t("qingShangChuanZhiFuPingZheng"),
					icon: "none",
				});
				return;
			}

			request
				.post("order/upload_pay_file", {
					offlinePayFile: JSON.stringify(this.offlinePayFile),
					orderNo: this.order_id,
				})
				.then((res) => {
					this.returns();
				});
		},
		getpreviewImage: function (indexn) {
			uni.previewImage({
				urls: this.refundReasonWapImg,
				current: indexn,
			});
		},
		statusPic(status) {
			const statusMap = {
				0: "/static/images/daifahuo.gif",
				1: "/static/images/daishouhuo.gif",
				3: "/static/images/yiwancheng.gif",
			};
			return statusMap[status];
		},
		open() {
			this.rightDrawer = true;
		},
		closeDrawer(e) {
			this.rightDrawer = false;
			if (!e) {
				this.rightDrawer = false;
			}
		},
		returns() {
			uni.navigateBack();
		},
		/**
		 * 事件回调
		 *
		 */
		onChangeFun: function (e) {
			let opt = e;
			let action = opt.action || null;
			let value = opt.value != undefined ? opt.value : null;
			action && this[action] && this[action](value);
		},
		/**
		 * 拨打电话
		 */
		makePhone: function () {
			uni.makePhoneCall({
				phoneNumber: this.system_store.phone,
			});
		},
		/**
		 * 关闭支付组件
		 *
		 */
		payClose: function () {
			this.pay_close = false;
		},
		/**
		 * 打开支付组件
		 *
		 */
		pay_open: function () {
			//this.modelTitle = this.$t(`message.login.prompt`);
			this.modelTitle = "";
			this.modelContent = this.$t(`message.tips.surePay`);
			this.$set(this, "modelType", "awaitPay");
			this.modal = true;
		},
		/**
		 * 支付成功回调
		 *
		 */
		pay_complete: function () {
			this.pay_close = false;
			this.pay_order_id = "";
			if (this.isReturen === 1) {
				this.getOrderReplyInfo();
			} else {
				if (this.isReturen === 1) {
					this.getOrderReplyInfo();
				} else {
					if (this.orderStatus == 0) {
						this.getOrderMasterInfo();
					} else {
						this.getOrderInfo();
					}
				}
			}
		},
		/**
		 * 支付失败回调
		 *
		 */
		pay_fail: function () {
			this.pay_close = false;
			this.pay_order_id = "";
		},
		/**
		 * 退款订单详情
		 *
		 */
		getOrderReplyInfo: function () {
			let that = this;
			uni.showLoading({
				title: this.$t(`message.tips.loding`),
			});
			orderReplyDetail(that.order_id)
				.then((res) => {
					uni.hideLoading();
					this.skeletonShow = false;
					that.$set(that, "orderInfo", res.data);
					that.$set(that, "id", res.data.id);
					that.$set(that, "cartInfo", res.data.orderInfoList);
					that.refundReasonWapImg = res.data.refundReasonWapImg
						? res.data.refundReasonWapImg.split(",")
						: [];
					that.isGoodsReturn = true;
					uni.setNavigationBarColor({
						frontColor: "#fff",
						backgroundColor: "#666666",
					});
				})
				.catch((err) => {
					this.skeletonShow = false;
					uni.hideLoading();
					that.$util.Tips(
						{
							title: err,
						},
						"/pages/users/order_list/index"
					);
				});
		},
		/**
		 * 获取待支付订单详细信息，主订单
		 *
		 */
		getOrderMasterInfo() {
			let that = this;
			uni.showLoading({
				title: this.$t(`message.tips.loding`),
			});
			orderMasterDetail(that.order_id)
				.then((res) => {
					uni.hideLoading();
					this.skeletonShow = false;
					that.$set(that, "orderInfo", res.data);
					that.$set(that, "id", res.data.id);
					that.$set(that, "cartInfo", res.data.orderList);
					if (this.orderInfo.payType === "offline") {
						if (this.orderInfo.offlinePayFile) {
							const offlinePayFile = JSON.parse(this.orderInfo.offlinePayFile);
							offlinePayFile.forEach((item) => {
								this.fileList.push({
									name: item,
									url: item,
								});
							});
						}
						this.getOfflinePayConfig();
					}
				})
				.catch((err) => {
					this.skeletonShow = false;
					uni.hideLoading();
					that.$util.Tips(
						{
							title: err,
						},
						"/pages/users/order_list/index"
					);
				});
		},
		/**
		 * 获取订单详细信息
		 *
		 */
		getOrderInfo() {
			let that = this;
			uni.showLoading({
				title: this.$t(`message.tips.loding`),
			});
			getOrderDetail(that.order_id)
				.then((res) => {
					uni.hideLoading();
					this.skeletonShow = false;
					that.$set(that, "orderInfo", res.data);
					that.$set(that, "evaluate", res.data.status == 2 ? 2 : 0);
					that.$set(that, "system_store", res.data.systemStore);
					that.$set(that, "id", res.data.id);
					that.$set(that, "cartInfo", res.data.orderInfoList);
					if (
						res.data.combinationId > 0 ||
						res.data.bargainId > 0 ||
						res.data.seckillId > 0
					) {
						this.againStatus = 1;
					}
				})
				.catch((err) => {
					uni.hideLoading();
					this.skeletonShow = false;
					that.$util.Tips(
						{
							title: err,
						},
						"/pages/users/order_list/index"
					);
				});
		},
		/**
		 *
		 * 剪切订单号
		 */

		copy(data) {
			uni.setClipboardData({
				data,
				success: () => {
					this.$util.Tips({
						title: this.$t("page.orderDetails.copySuccess"),
					});
				},
			});
		},

		/**
		 * 打电话
		 */
		goTel: function () {
			uni.makePhoneCall({
				phoneNumber: this.orderInfo.deliveryId,
			});
		},
		/**
		 * 设置底部按钮
		 *
		 */
		getOrderStatus: function () {
			let orderInfo = this.orderInfo || {},
				_status = orderInfo.pstatus || {
					type: 0,
				},
				status = {};
			let type = parseInt(_status.type),
				delivery_type = orderInfo.deliveryType;
			status = {
				type: type == 9 ? -9 : type,
				class_status: 0,
			};
			if (type == 2 && delivery_type == "express") status.class_status = 2; //查看物流
			if (type == 2) status.class_status = 3; //确认收货
			if (type == 4 || type == 0) status.class_status = 4; //删除订单
			if (type == 3 || type == 4) status.class_status = 5; //再次购买
			this.$set(this, "status", status);
		},
		/**
		 * 再此购买
		 *
		 */
		goOrderConfirm: Debounce(function () {
			uni.showLoading({
				title: this.$t(`message.tips.loding`),
			});
			let storeCartListRequest = [];
			let that = this;
			this.cartInfo.map((item) => {
				storeCartListRequest.push({
					productId: parseFloat(item.productId),
					productAttrUnique: item.attrValueId,
					cartNum: parseFloat(item.payNum),
				});
			});
			postCartAdd(storeCartListRequest)
				.then((res) => {
					uni.switchTab({
						url: "/pages/order_addcart/order_addcart",
					});
				})
				.catch((res) => {
					return this.$util.Tips({
						title: res,
					});
				});
		}),

		//确认收货
		confirmOrder: Debounce(function () {
			let that = this;
			that.modelTitle = this.$t(`page.orderDetails.confirm`);
			that.modelContent = this.$t(`page.orderDetails.confirmInfo`);
			that.$set(that, "modelType", "confirmOrder");
			that.modal = true;
		}),
		//删除订单
		delOrder: Debounce(function () {
			let that = this;
			// that.modelTitle = this.$t(`message.login.prompt`);
			that.modelTitle = "";
			that.modelContent = this.$t(`page.orderDetails.confirmDel`);
			that.$set(that, "modelType", "delOrder");
			that.modal = true;
		}),
		//取消订单
		cancelOrder: Debounce(function () {
			let that = this;
			// that.modelTitle = this.$t(`message.login.prompt`);
			that.modelTitle = "";
			that.modelContent = this.$t(`page.orderDetails.confirmCancel`);
			that.$set(that, "modelType", "cancelOrder");
			that.modal = true;
		}),
		handleClick(e) {
			let index = e.index,
				that = this;
			if (index === 1) {
				switch (that.modelType) {
					case "confirmOrder":
						orderTake(that.order_id)
							.then((res) => {
								return that.$util.Tips(
									{
										title: this.$t(`message.login.operationSU`),
										icon: "success",
									},
									function () {
										if (that.isReturen === 1) {
											that.getOrderReplyInfo();
										} else {
											if (that.orderStatus == 0) {
												that.getOrderMasterInfo();
											} else {
												that.getOrderInfo();
											}
										}
									}
								);
							})
							.catch((err) => {
								return that.$util.Tips({
									title: err,
								});
							});
						break;
					case "delOrder":
						orderDel(that.order_id)
							.then((res) => {
								return that.$util.Tips(
									{
										title: this.$t(`message.login.delSU`),
										icon: "success",
									},
									{
										tab: 4,
										url: "../users/order_list/index",
									}
								);
							})
							.catch((err) => {
								return that.$util.Tips({
									title: err,
								});
							});
						break;
					case "cancelOrder":
						orderCancel(that.order_id)
							.then((data) => {
								that.$util.Tips(
									{
										title: this.$t(`message.login.calSU`),
									},
									{
										tab: 4,
										url: "../users/order_list/index",
									}
								);
							})
							.catch((err) => {
								that.$util.Tips({
									title: err.message,
								});
							});
						break;
					case "awaitPay":
						if (that.orderInfo.payType === "offline") {
							this.uploadPayFile();
						} else {
							that.$Order.goPay({
								orderNo: that.orderInfo.orderNo,
								payChannel: "mobile",
								payType: that.orderInfo.payType,
							});
						}

						//window.location.href = this.orderInfo.redirect;
						break;
				}
			}
			this.hide();
		},
		hide() {
			this.modal = false;
		},
	},
};
</script>

<style scoped lang="scss">
.mb4 {
	margin-bottom: 10rpx;
}
.refundReasonWapImg {
	justify-content: end;
	width: 71%;
}
.userRemark {
	color: #666666;
}
.borders {
	border-bottom: 1rpx solid #eee;
	padding-bottom: 30rpx;
}
.pictrue {
	width: 80rpx;
	height: 80rpx;
	image {
		width: 100%;
		height: 100%;
	}
}
.qs-btn {
	width: auto;
	height: 60rpx;
	text-align: center;
	line-height: 60rpx;
	border-radius: 50rpx;
	color: #fff;
	font-size: 27rpx;
	padding: 0 3%;
	color: #aaa;
	border: 1px solid #ddd;
	margin-right: 20rpx;
}
.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 24rpx;
}
.shuoming {
	width: 32rpx;
	height: 32rpx;
}
.mp-header {
	width: 100%;
	@include main_bg_color(theme);
}
.goodCall {
	@include main_color(theme);
	text-align: center;
	width: 100%;
	height: 86rpx;
	padding: 0 30rpx;
	border-bottom: 1rpx solid #eee;
	font-size: 30rpx;
	line-height: 86rpx;
	background: #fff;

	.icon-kefu {
		font-size: 36rpx;
		margin-right: 15rpx;
	}

	/* #ifdef MP */
	button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 86rpx;
		font-size: 30rpx;
		@include main_color(theme);
	}

	/* #endif */
}
.justify-between {
	justify-content: space-between;
}
.align-center {
	align-items: center;
}
.order-details .header {
	height: 250rpx;
	padding: 0 30rpx;
}
.bg_color {
	@include main_bg_color(theme);
}
.bg-gray {
	background-color: #666 !important;
}
.order-details .header.on {
	background-color: #666 !important;
}

.order-details .header .pictrue {
	width: 110rpx;
	height: 110rpx;
}

.order-details .header .pictrue image {
	width: 100%;
	height: 100%;
}

.order-details .header .data {
	color: rgba(255, 255, 255, 0.8);
	font-size: 24rpx;
	margin-left: 27rpx;
}

.order-details .header .data.on {
	margin-left: 0;
}

.order-details .header .data .state {
	font-size: 30rpx;
	font-weight: bold;
	color: #fff;
	margin-bottom: 7rpx;
}

.order-details .header .data .time {
	margin-left: 20rpx;
}

.picTxt {
	height: 150rpx;
}

.order-details .nav {
	width: 100%;
	border-radius: 14rpx;
	margin: -100rpx auto 0 auto;
}
.order-details .address {
	font-size: 26rpx;
	color: #868686;
	background-color: #fff;
	padding: 30rpx 24rpx;
}

.order-details .address .name {
	font-size: 30rpx;
	color: #282828;
	margin-bottom: 15rpx;
}

.order-details .address .name .phone {
	margin-left: 40rpx;
}

.order-details .line {
	width: 100%;
	height: 3rpx;
}

.order-details .line image {
	width: 100%;
	height: 100%;
	display: block;
}
.order-details .wrapper {
	background-color: #fff;
	margin-top: 12rpx;
	padding: 30rpx 24rpx;
}

.order-details .wrapper .item {
	font-size: 28rpx;
	color: #282828;
	align-items: center;
}

.order-details .wrapper .item ~ .item {
	margin-top: 20rpx;
}

.order-details .wrapper .item .conter {
	color: #666666;
	text-align: left;
	// overflow: hidden;
	// text-overflow: ellipsis;
	// white-space: nowrap;
}
// .mark_show {
// 	color: #868686;
// 	width: 470rpx;
// 	text-align: right;
// }
.order-details .wrapper .item .conter .copy {
	font-size: 20rpx;
	color: #333;
	border-radius: 20rpx;
	border: 1rpx solid #666;
	padding: 3rpx 15rpx;
	margin-left: 24rpx;
}

.order-details .wrapper .actualPay {
	padding-top: 30rpx;
}

.order-details .wrapper .actualPay .money {
	font-weight: bold;
	font-size: 30rpx;
	@include price_color(theme);
	margin-left: 5rpx;
}

.order-details .footer {
	width: 100%;
	position: sticky;
	bottom: 0;
	left: 0;
	background-color: #fff;
	padding: 30rpx;
	box-sizing: border-box;
}

.order-details .footer .bnt {
	padding: 0 20rpx;
	margin: 10rpx;
	height: 54rpx;
	text-align: center;
	line-height: 54rpx;
	border-radius: 50rpx;
	color: #fff;
	font-size: 27rpx;
}

.order-details .footer .bnt.cancel {
	color: #aaa;
	border: 1rpx solid #ddd;
}

.order-details .footer .bnt ~ .bnt {
	margin-left: 18rpx;
}

.order-details .writeOff {
	background-color: #fff;
	margin-top: 15rpx;
	padding-bottom: 50rpx;
}

.order-details .writeOff .title {
	font-size: 30rpx;
	color: #282828;
	height: 87rpx;
	border-bottom: 1px solid #f0f0f0;
	padding: 0 24rpx;
	line-height: 87rpx;
}

.order-details .writeOff .grayBg {
	background-color: #f2f5f7;
	width: 590rpx;
	height: 384rpx;
	border-radius: 20rpx 20rpx 0 0;
	margin: 50rpx auto 0 auto;
	padding-top: 55rpx;
}

.order-details .writeOff .grayBg .pictrue {
	width: 290rpx;
	height: 290rpx;
	margin: 0 auto;
}

.order-details .writeOff .grayBg .pictrue image {
	width: 100%;
	height: 100%;
	display: block;
}

.order-details .writeOff .gear {
	width: 590rpx;
	height: 30rpx;
	margin: 0 auto;
}

.order-details .writeOff .gear image {
	width: 100%;
	height: 100%;
	display: block;
}

.order-details .writeOff .num {
	background-color: #f0c34c;
	width: 590rpx;
	height: 84rpx;
	color: #282828;
	font-size: 48rpx;
	margin: 0 auto;
	border-radius: 0 0 20rpx 20rpx;
	text-align: center;
	padding-top: 4rpx;
}

.order-details .writeOff .rules {
	margin: 46rpx 30rpx 0 30rpx;
	border-top: 1px solid #f0f0f0;
	padding-top: 10rpx;
}

.order-details .writeOff .rules .item {
	margin-top: 20rpx;
}

.order-details .writeOff .rules .item .rulesTitle {
	font-size: 28rpx;
	color: #282828;
}

.order-details .writeOff .rules .item .rulesTitle .iconfont {
	font-size: 30rpx;
	color: #333;
	margin-right: 8rpx;
	margin-top: 5rpx;
}

.order-details .writeOff .rules .item .info {
	font-size: 28rpx;
	color: #999;
	margin-top: 7rpx;
}

.order-details .writeOff .rules .item .info .time {
	margin-left: 20rpx;
}

.order-details .map {
	height: 86rpx;
	font-size: 30rpx;
	color: #282828;
	line-height: 86rpx;
	border-bottom: 1px solid #f0f0f0;
	margin-top: 15rpx;
	background-color: #fff;
	padding: 0 24rpx;
}

.order-details .map .place {
	font-size: 26rpx;
	width: 176rpx;
	height: 50rpx;
	border-radius: 25rpx;
	line-height: 50rpx;
	text-align: center;
}

.order-details .map .place .iconfont {
	font-size: 27rpx;
	height: 27rpx;
	line-height: 27rpx;
	margin: 2rpx 3rpx 0 0;
}

.order-details .address .name .iconfont {
	font-size: 34rpx;
	margin-left: 10rpx;
}

.refund {
	padding: 0 !important;
	margin-top: 15rpx;
	background-color: #fff;

	.title {
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #333;
		height: 86rpx;
		border-bottom: 1px solid #f5f5f5;
		font-weight: 400;
		padding: 0 24rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}
	}

	.con {
		font-size: 26rpx;
		color: #666666;
		padding: 30rpx 24rpx;
	}
}
::v-deep .tui-red {
	@include main_bg_color(theme);
}
::v-deep .tui-red-outline {
	@include main_color(theme);
	@include coupons_border_color(theme);
}

.fileList {
	image {
		width: 100rpx;
		height: 100rpx;
	}
	image + image {
		margin-left: 30rpx;
	}
}

.upload .pictrue {
	border-radius: 14rpx;
	margin: 22rpx 23rpx 0 0;
	width: 156rpx;
	height: 156rpx;
	position: relative;
	font-size: 24rpx;
	color: #bbb;
}

.upload .pictrue image {
	width: 100%;
	height: 100%;
	border-radius: 14rpx;
}

.upload .pictrue .icon-zhifushibai {
	position: absolute;
	font-size: 35rpx;
	top: -10rpx;
	right: -10rpx;
}

.upload .pictrue .icon-icon25201 {
	color: #bfbfbf;
	font-size: 50rpx;
}

.upload .pictrue.uploadpicBtn {
	border: 1rpx solid #ddd;
	box-sizing: border-box;
}
.order-item {
	display: flex;
	align-items: center;
	.img {
		width: 32rpx;
		height: 32rpx;
		margin-left: 5rpx;
	}
}
.refund_reason {
	display: flex;
	align-items: center;
	height: 32rpx;
	.img {
		margin-top: 3rpx;
		width: 32rpx;
		height: 32rpx;
	}
}
.message-wrap {
	align-items: flex-start;
	margin-top: 20rpx;
	.conter {
		color: #868686;
		// text-overflow: ;
		white-space: pre-wrap;
	}
}
</style>
